<!--
 * @Description: 附件、关联文档，带滚动条，只查看的集合
-->
<template>
  <div class="accessory-list-group">
    <template v-if="isShowNewMode">
      <div v-if="hasDelete" :style="{ maxHeight: `${maxHeight}px`, overflowY: 'auto' }">
        <AccessoryItem
          v-if="isShowAtta"
          :dataList="attachments"
          :hasDelete="hasDelete"
          :isNewMode="isNewMode"
          :isShowBatchDownload="isShowBatchDownload"
          :layout="layout"
          @deleteItem="(index) => deleteItem(attachments, index)" />
        <AccessoryItem
          v-if="isShowDoc"
          :dataList="relationDocs"
          :areaName="areaName"
          :hasDelete="hasDelete"
          :isNewMode="isNewMode"
          :isShowBatchDownload="isShowBatchDownload"
          isDoc
          :layout="layout"
          @deleteItem="(index) => deleteItem(relationDocs, index)" />
      </div>
      <Scroll v-else :style="accessoryStyle">
        <AccessoryItem
          v-if="isShowAtta"
          :dataList="attachments"
          :hasDelete="hasDelete"
          :isNewMode="isNewMode"
          :isShowBatchDownload="isShowBatchDownload"
          :layout="layout"
          @deleteItem="(index) => deleteItem(attachments, index)" />
        <AccessoryItem
          v-if="isShowDoc"
          :dataList="relationDocs"
          :areaName="areaName"
          :hasDelete="hasDelete"
          :isNewMode="isNewMode"
          :isShowBatchDownload="isShowBatchDownload"
          isDoc
          :layout="layout"
          @deleteItem="(index) => deleteItem(relationDocs, index)" />
      </Scroll>
    </template>
    <template v-else>
      <Scroll :style="accessoryStyle">
        <AccessoryItem
          v-if="isShowAtta"
          :dataList="attachments"
          :hasDelete="hasDelete"
          :isNewMode="isNewMode"
          @deleteItem="(index) => deleteItem(attachments, index)" />
        <AccessoryItem
          v-if="isShowDoc"
          :dataList="relationDocs"
          :areaName="areaName"
          :hasDelete="hasDelete"
          :isNewMode="isNewMode"
          isDoc
          @deleteItem="(index) => deleteItem(relationDocs, index)" />
      </Scroll>
    </template>
  </div>
</template>
<script>
  //引入附件、文档列表组件
  import AccessoryItem from '@/components/atom/accessory-item';
  export default {
    name: 'AccessoryList',
    components: {
      AccessoryItem
    },
    props: {
      //是否显示附件列表
      isShowAttachments: {
        type: Boolean,
        default: true
      },
      //附件列表
      attachments: {
        type: Array
      },
      //是否显示关联文档列表
      isShowRelationDocs: {
        type: Boolean,
        default: true
      },
      //关联文档列表
      relationDocs: {
        type: Array
      },
      //最大高度。超过显示滚动条
      maxHeight: {
        type: Number,
        default: 81
      },
      //是否带删除
      hasDelete: {
        type: Boolean,
        default: false
      },
      //相关数据区域。相关数据必传
      areaName: { type: String, default: 'doc1' },
      isNewMode: {
        // 是否为新组件模式
        type: Boolean,
        default: false
      },
      isSupportBatchDownload: {
        // 是否支持批量下载
        type: Boolean,
        default: false
      },
      layout: {
        // 排列方式
        type: String,
        default: 'horizontal',
        validator: (value) => ['horizontal', 'vertical'].includes(value)
      }
    },
    computed: {
      isShowAtta() {
        return this.isShowAttachments && this.attachments && this.attachments.length;
      },
      isShowDoc() {
        return this.isShowRelationDocs && this.relationDocs && this.relationDocs.length;
      },
      isShowNewMode() {
        return this.isNewMode && (this.isShowAtta || this.isShowDoc);
      },
      isShowBatchDownload() {
        return this.isSupportBatchDownload && this.attachments && this.attachments.length > 1;
      },
      accessoryStyle() {
        return { maxHeight: `${this.maxHeight}px` };
      }
    },
    methods: {
      //删除附件某一项。的确需要对象的特性，写这个方法是为了不让lint报错
      deleteItem(list, index) {
        list.splice(index, 1);
      }
    }
  };
</script>
<style lang="scss">
  .accessory-list-group {
    > div {
      margin-top: 8px;
    }
  }
</style>
